<template>
  <section class='f-index'>
    <section class="f-flex-between">
      <p class="f-title-name">我的设备</p>
      <div class="f-add-img" @click="pageJump('device/add')">
        <img src="@/assets/icons/btn_icon_add.png" alt="">
      </div>
    </section>

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" style="overflow-y: auto;flex:1">
      <section class="f-card" v-if="!devList.length">
        <div class="f-left">
          <p class="f-desc">您目前还没有流量卡，如何添 加激活，请查看“新手引导”</p>
          <div class="f-btn-box" @click="pageJump('help')">新手引导</div>
        </div>
        <div class="f-img-box">
          <img class="f-img02" src="@/assets/imgs/eikon_icon_pic02.png" alt="">
        </div>
      </section>

      <section class="f-device-list" v-for="(item,index) in devList" :key="index">
        <div class="f-device-name">
          <p @click="pageJump('device',item)">{{item.alias || item.devModel || '--'}}</p>
          <p class="f-connected-box">
            <template v-if="isConnect && item.imei == currentImei">
              <img src="@/assets/icons/home_icon_connected.png" alt="">
              <span>已连接</span>
            </template>
            <template v-else>
              <img src="@/assets/icons/home_icon_ununited.png" alt="">
              <span @click="openDevice(item,index)">去连接</span>
            </template>
          </p>
        </div>
        <div class="f-device-code">
          <p>
            <span>用户码：</span>
            <span style="color:#000000;margin: 0 7px 0 0;">{{item.code}}</span>
            <img class="f-img1" src="@/assets/icons/btn_icon_copy.png" alt="" @click="handleCopy(item.code)">
          </p>
          <p @click="checkChangeOperator(item,index)" v-if="isConnect && item.productType == 1 && item.imei == currentImei">
            <span>当前服务：</span>
            <span style="color:#000000;margin: 0 7px 0 0;">{{ currentServe == 1? '国际服务': '国内服务' }}</span>
            <img class="f-img2" src="@/assets/icons/btn_icon_switchover.png" alt="">
          </p>
        </div>
        <section ref="card1Ref" class="f-in-china" @click="pageJump('inChina',item)">
          <div class="f-china-title">
            <p>
              <img src="@/assets/icons/home_icon_china.png" alt="">
              <span>国内服务</span>
            </p>
            <p class="f-operatorName" v-if="isConnect && currentServe == 2 && item.imei == currentImei ">
              <span class="f-green"></span>
              <span>{{currentOperatorName? operatorName[currentOperatorName]: '--'}}</span>
            </p>
          </div>
          <ul class="f-ul">
            <li class="f-li" v-for="(myItem,myIndex) in item.cardIspList" :key="myIndex" @click.stop="toRealName(myItem)">
              <div class=" g-flex-ct" style="height: 10px;">
                <img v-if="myItem.isp == 'unicom'" style="width: 21px;margin-left: 11px;" src="@/assets/icons/icon_liantong.png"
                  alt="">
                <img v-if="myItem.isp == 'cmcc'" style="width: 21px;margin-left: 11px;" src="@/assets/icons/icon_yidong.png"
                  alt="">
                <img v-if="myItem.isp == 'cbn'" style="width: 21px;margin-left: 11px;" src="@/assets/icons/icon_guangdian.png"
                  alt="">
                <img v-if="myItem.isp == 'telecom'" class="f-img" src="@/assets/icons/icon_dianxin.png" alt="">
                <p class="f-ml-05">中国{{myItem.ispName}}</p>
              </div>
              <div class="f-center f-mt-05">
                <span class="f-real-name" :style="{'background': myItem.isRealName == 1? '#304EEE': ''}">
                  {{myItem.isRealName == 1? '已实名': '未实名'}}
                </span>
              </div>
            </li>
          </ul>
          <section class="f-residual-flow-card" v-if="item.cardPackList && item.cardPackList.length">
            <p style="font-weight: 300;font-size: 9px;color: #666666;">本月剩余</p>
            <p class="f-mt-05" style="font-weight: 500;font-size: 14px;color: #000000;">{{ bytesToSize(item.remain) }}</p>
            <div class="f-box-01 f-mt-10">
              <p>已使用{{ (( (item.total + item.additional) - item.remain)/(item.total + item.additional)*100).toFixed(2)}}%</p>
              <p>剩余{{ 100-(((item.total + item.additional) - item.remain)/(item.total + item.additional)*100).toFixed(2)}}%</p>
            </div>
            <div class="f-chart">
              <p class="f-chart-inner"
                :style="{'width': ((item.total + item.additional) - item.remain)/(item.total + item.additional)*100 + '%'}"></p>
            </div>
            <div class="f-box-02">
              <p>{{ bytesToSize((item.total + item.additional) - item.remain)}}</p>
              <p>{{ bytesToSize((item.total + item.additional)) }}</p>
            </div>
            <div class="f-box-03" v-for="(myItem, myIndex) in item.cardPackList" :key="myIndex">
              <div v-if="myItem.isUsed">
                <span>{{myItem.title || '--'}}</span>
                <span>（{{myItem.enableIsp}}）</span>
                <div class="f-mt-05">
                  <span v-for="(add,addIndex) in myItem.addiInfoList" :key="add.packId">
                    {{ add.title }}
                    <span v-if="myItem.addiInfoList.length != addIndex+1">，</span>
                  </span>
                </div>
              </div>
            </div>
          </section>

          <section class="f-recharge-card" v-else>
            <div class="f-left">
              <div class="f-desc">
                <template v-if="true">
                  <p>您目前还没有订购流量套餐，</p>
                  <p>请点击“订购套餐”</p>
                  <p>订购一款心仪的套餐产品</p>
                </template>

                <template v-if="false">
                  <p>您的之前订购的套餐已过期，</p>
                  <p>如需继续使用，</p>
                  <p>请重新订购</p>
                </template>
              </div>
              <div class="f-btn-box" @click.stop="pageJump('meal',item)">订购套餐</div>
            </div>
            <div class="f-img-box">
              <img class="f-img01" src="@/assets/imgs/eikon_icon_pic01.png" alt="">
            </div>
          </section>
        </section>
        <section ref="card2Ref" class="f-out-china" @click="pageJump('outChina',item)" v-if="item.productType == 1">
          <div class="f-out-china-title">
            <p>
              <img src="@/assets/icons/home_icon_international.png" alt="">
              <span>国际服务</span>
            </p>
            <p class="f-operatorName" v-if="isConnect && currentServe == 1 && item.imei == currentImei ">
              <span class="f-green"></span>
              <span>正在使用</span>
            </p>
          </div>
          <div class="f-box-03">
            <p>已订套餐：</p>
            <p>{{ item.usablePacks?.length || 0 }}个</p>
          </div>
        </section>
      </section>
    </van-pull-refresh>

  </section>
</template>

<script>
import { ref, reactive, toRefs, onMounted, watch, onBeforeUnmount } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import JsBridge from '@/utils/JsBridge.js'
import api from './api'
import { successDeal, bytesToSize, getStore, setStore, errorDeal } from '@/utils/utils';
import { showLoadingToast, closeToast, showToast, showDialog } from 'vant';

export default {
  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const card1Ref = ref()
    const card2Ref = ref()

    const state = reactive({
      showPopover: true,
      devList: (getStore('cards') && getStore('cards').devList) ? getStore('cards').devList : [],
      // devList: [{ productType: 1, cardPackList: [{}] }, { productType: 2, cardPackList: [{}] }],

      status: {
        '0': '未启用',
        '1': '正常使用',
        '2': '临时停用',
        '3': '停用',
        '4': '注销',
      },
      statusColor: {
        '0': '#F38C27',
        '1': '#304EEE',
        '2': '#8A8A8A',
        '3': '#8A8A8A',
        '4': '#FF482F',
      },
      priority: {
        'base': '单次包',
        'month': '每月包',
        'rate': '累计包',
        'quicken': '提速包',
        'addi': '加油包',
        'holiday': '假日包',
      },

      refreshing: false,

      isConnect: false,
      currentImei: '',
      currentOperatorName: '',
      operatorName: {
        'unicom': '中国联通',
        'cmcc': '中国移动',
        'telecom': '中国电信',
        'cbn': '中国广电',
        // '46000': '中国移动',
        // '46002': '中国移动',
        // '46004': '中国移动',
        // '46007': '中国移动',
        // '46008': '中国移动',
        // '46009': '中国移动',
        // '46024': '中国移动',
        // '45400': '优客联',
        // '45412': '优客联',
        // '45413': '优客联',
        // '45415': '优客联',
        // '45417': '优客联',
        // '46003': '中国电信',
        // '46005': '中国电信',
        // '46011': '中国电信',
        // '46001': '中国联通',
        // '46006': '中国联通',
      },
      currentDevice: {},
      currentServe: 2,
      currentIndex: 1,
      isFirst: true,
      setTimeout: 1,
      timer: null,
      getOperatorNameTimer: 0,
    })

    onMounted(() => {
      store.commit("setNavBar", {
        title: '',
        show: false,
      });

      getCards()
      onSocketMessage()
    })

    const onSocketMessage = () => {
      // 获取设备的消息
      JsBridge.registerHandler("onSocketMessage", function (response, responseCallback) {
        let data = JSON.parse(response)
        console.log(data, route.path)
        if (route.path == '/index') {
          clearTimeout(state.timer)
          if (data) {
            switch (data.msg) {
              case 'connect':
                if (data.state) {
                  console.log('设备连接成功')
                  if (!state.isConnect) {
                    closeToast()
                    getDevImei()
                  }
                  state.isConnect = true
                } else {
                  closeToast()
                  state.isConnect = false
                  console.log('设备连接已关闭')
                }
                break
              case 'checkChangeOperator':
                if (data.data.state) {
                  changeOperator()
                } else {
                  errorDeal('频繁切网，请稍后尝试')
                }
                break;
              case 'changeOperatorByIndex':
                closeToast()
                if (data.data.state) {
                  showLoadingToast({
                    message: '切换运营商中...',
                    forbidClick: true,
                    duration: 0,
                  });
                  setTimeout(() => {
                    getIccid()
                  }, 5000)
                } else {
                  if (data.data.code == '-101') {
                    errorDeal('频繁操作，请稍后尝试')
                  } else {
                    errorDeal('切换运营商失败')
                  }
                }
                break
              case 'getDevImei':
                closeToast()
                if (data.data.imei1 == state.currentImei || data.data.imei2 == state.currentImei) {
                  getIccid()
                } else {
                  showDialog({
                    title: '连接异常',
                    message: '当前设备不匹配',
                  }).then(() => {
                    closeDevice()
                  });
                }
                break
              case 'getIccid':
                closeToast()
                if (data.data.state) {
                  let newIccid = data.data.iccid.slice(0, 13)
                  console.log('newIccid', newIccid)

                  let inChinaIccidList = []
                  state.currentDevice.cardIspList.forEach(item => {
                    inChinaIccidList.push(item.iccid.slice(0, 13))
                  })
                  console.log('inChinaIccidList', inChinaIccidList)

                  let findIndexInChina = inChinaIccidList.findIndex(item => item == newIccid)
                  if (findIndexInChina > -1) {
                    let findIndex = state.currentDevice.cardIspList.findIndex(item => item.iccid == data.data.iccid)
                    if (findIndex > -1) {
                      state.currentOperatorName = state.currentDevice.cardIspList[findIndex].isp
                      console.log('state.currentOperatorName', state.currentOperatorName)
                      // checkSimUserCode()
                      if (state.currentServe == 1) {
                        state.currentServe = 2
                        swapElementsWithFlip(state.currentIndex)
                      }
                    } else {
                      showDialog({
                        title: '连接异常',
                        message: '当前sim卡不匹配',
                      }).then(() => {
                        closeDevice()
                      });
                    }
                  } else {
                    state.currentOperatorName = ''
                    // checkSimUserCode()
                    if (state.currentServe == 2) {
                      state.currentServe = 1
                      swapElementsWithFlip(state.currentIndex)
                    }
                  }
                } else {
                  showDialog({
                    title: '连接异常',
                    message: '当前sim卡不可用',
                  }).then(() => {
                    closeDevice()
                  });
                }
                break
              case 'checkSimUserCode':
                closeToast()
                if (!data.data.result) {
                  showDialog({
                    title: '连接异常',
                    message: '当前sim卡不可用',
                  }).then(() => {
                    closeDevice()
                  });
                }
                break;
            }
          }
        }
      });
    }

    // 获取设备Imei
    const getDevImei = () => {
      let json = {
        msgId: ''
      }
      JsBridge.callHandler('getDevImei', json, (response) => {
        let data = JSON.parse(response)
        // console.log('getDevImei', data)
      })
    }

    // 获取当前运营商
    const getOperatorName = () => {
      let json = {
        msgId: ''
      }
      JsBridge.callHandler('getOperatorName', json, (response) => {
        let data = JSON.parse(response)
        // console.log('getOperatorName', data)
      })
    }

    // 获取设备的iccic
    const getIccid = () => {
      let json = {
        msgId: ''
      }
      JsBridge.callHandler('getIccid', json, (response) => {
        let data = JSON.parse(response)
        // console.log('getIccid', data)
      })
    }

    // 开启设备连接
    const openDevice = (parmary, index) => {
      // closeDevice()

      state.currentImei = parmary.imei
      state.currentDevice = parmary
      state.currentServe = 2
      state.currentIndex = index
      showLoadingToast({
        message: '设备连接中...',
        forbidClick: true,
        duration: 0,
      });
      state.timer = setTimeout(() => {
        errorDeal('设备连接失败')
      }, 1000 * 5)
      JsBridge.callHandler('connect', {}, (response) => {
        let data = JSON.parse(response)
        console.log('connect', data)
      })
    }

    // 关闭设备连接
    const closeDevice = () => {
      state.currentImei = ''
      state.isConnect = false
      JsBridge.callHandler('disConnect', {}, (response) => {
        console.log('设备连接失败')
      })
    }

    // 检查是否可以切换运营商
    const checkChangeOperator = (parmary) => {
      let msgId = `checkChangeOperator-${new Date().getTime()}`
      JsBridge.callHandler('checkChangeOperator', msgId, (response) => { })
    }

    // 切换运营商 
    const changeOperator = () => {
      showLoadingToast({
        message: '切换运营商中...',
        forbidClick: true,
        duration: 0,
      });
      state.timer = setTimeout(() => {
        errorDeal('切换运营商失败')
      }, 1000 * 5)

      // 1、联通 2、移动 3、优客联
      let index
      if (state.currentServe == 1) {
        index = state.currentDevice.cardIspList[0].cardSlot
      } else if (state.currentServe == 2) {
        index = state.currentDevice.yklCardSlot
      }
      let timestamp = new Date().getTime()
      let json = {
        index,
        msgId: ''
      }
      JsBridge.callHandler('changeOperatorByIndex', json, (response) => {
        let data = JSON.parse(response)
        console.log('changeOperatorByIndex', data)
      })
    }

    // 是否是全讯的卡
    const checkSimUserCode = () => {
      let json = {
        userCode: state.currentDevice.code,
        msgId: ''
      }
      JsBridge.callHandler('checkSimUserCode', json, (response) => {
        let data = JSON.parse(response)
        console.log('checkSimUserCode', data)
      })
    }

    const getCards = () => {
      api.cards().then(res => {
        if (res.data.devList) {
          state.devList = res.data.devList
          setStore('CURRENT_CODE', { code: state.devList[0]?.code })
        } else {
          state.devList = []
        }
      })
    }

    function handleCopy(value) {
      const input = document.createElement('input');
      document.body.appendChild(input);
      input.setAttribute('value', value);
      input.select();
      if (document.execCommand('copy')) {
        document.execCommand('copy');
        successDeal('复制成功')
      }
      document.body.removeChild(input);
    }

    const pageJump = (path, data) => {
      setStore('CURRENT_CODE', { code: data?.code })
      router.push({
        path: `/${path}`,
        query: {
          code: data?.code,
          devModel: data?.devModel
        }
      })
    }

    const onRefresh = () => {
      getCards()

      if (state.refreshing) {
        state.refreshing = false;
      }
    };

    function swapElementsWithFlip(index) {
      if (card1Ref.value[index] && card2Ref.value[index]) {
        let itemA = card1Ref.value[index]
        let itemB = card2Ref.value[index]

        // 记录初始位置
        const firstA = itemA.getBoundingClientRect()
        const firstB = itemB.getBoundingClientRect()

        // 交换 DOM 位置
        const parent = itemA.parentNode
        const temp = document.createElement('div')
        parent.insertBefore(temp, itemA)
        parent.insertBefore(itemA, itemB)
        parent.insertBefore(itemB, temp)
        parent.removeChild(temp)

        // 计算最终位置
        const lastA = itemA.getBoundingClientRect()
        const lastB = itemB.getBoundingClientRect()

        // 计算变换值
        const invertA = {
          x: firstA.left - lastA.left,
          y: firstA.top - lastA.top
        }

        const invertB = {
          x: firstB.left - lastB.left,
          y: firstB.top - lastB.top
        }

        // 准备动画
        itemA.animate([
          { transform: `translate(${invertA.x}px, ${invertA.y}px)` },
          { transform: 'translate(0, 0)' }
        ], {
          duration: 300,
          easing: 'ease'
        })

        itemB.animate([
          { transform: `translate(${invertB.x}px, ${invertB.y}px)` },
          { transform: 'translate(0, 0)' }
        ], {
          duration: 300,
          easing: 'ease'
        })
      }
    }

    const toRealName = (params) => {
      if (params.isRealName != 1) {
        router.push({
          path: '/realName',
          query: {
            isp: params.isp,
            url: params.url,
            iccid: params.iccid,
            msisdn: params.msisdn,
          }
        })
      }
    }

    onBeforeUnmount(() => {
      closeDevice()
    })

    return {
      ...toRefs(state),
      card1Ref,
      card2Ref,
      bytesToSize,
      getCards,
      handleCopy,
      pageJump,
      onRefresh,
      swapElementsWithFlip,
      openDevice,
      changeOperator,
      checkChangeOperator,
      toRealName,
    }
  }
}
</script>

<style lang='scss' scoped>
.f-index {
  // background-image: url("@/assets/imgs/login_bg_pic.png");
  // background-size: 100% 100%;
  background-color: #1a7dbe !important;
  padding: 50px 14px 0 14px;
  display: flex;
  flex-direction: column;
  .f-add-img {
    img {
      width: 22px;
      height: 22px;
      cursor: pointer;
    }
  }
  .f-title-name {
    font-weight: 500;
    font-size: 24px;
    color: #f5f5f5;
    margin-top: 10px;
  }
  .f-card {
    width: 347px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 13px;
    display: flex;
    justify-content: space-between;
    padding: 19px 7px 12px 15px;
    margin-top: 23px;
    .f-left {
      font-weight: 400;
      flex: 1;
      .f-name {
        font-size: 16px;
        color: #000000;
      }
      .f-desc {
        font-size: 12px;
        color: #666666;
        margin: 12px 0 26px 0;
      }
      .f-btn-box {
        width: 134px;
        background: rgba(255, 255, 255, 0.7);
        border-radius: 14px;
        font-size: 14px;
        color: #304eee;
        text-align: center;
        line-height: 27px;
        padding: 2px 0;
      }
    }
    .f-img-box {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 165px;
      .f-img01 {
        width: 111px;
        height: 116px;
      }
      .f-img02 {
        width: 153px;
        height: 96px;
      }
    }
  }
  .f-device-list {
    width: 347px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 13px;
    margin-top: 14px;
    padding: 20px 15px;
    .f-device-name {
      font-weight: 400;
      font-size: 20px;
      color: #000000;
      display: flex;
      align-items: center;
      justify-content: space-between;
      p:first-child {
        text-decoration-line: underline;
        text-underline-offset: 5px;
        color: #304eee;
        flex: 1;
      }
      .f-connected-box {
        padding: 6px 11px;
        font-size: 11px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 11px;
        display: flex;
        align-items: center;
        img {
          width: 11px;
          height: 11px;
          margin-right: 5px;
        }
      }
    }
    .f-device-code {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-weight: 400;
      font-size: 12px;
      color: #424242;
      margin-top: 15px;
      p {
        display: flex;
        align-items: center;
      }
      .f-img1 {
        width: 14px;
        height: 14px;
      }
      .f-img2 {
        width: 13px;
        height: 11px;
      }
    }
    .f-in-china {
      width: 317px;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 13px;
      padding: 17px 12px 22px 12px;
      background-image: url("@/assets/imgs/home_bg_china.png");
      background-size: 100% 136px;
      background-repeat: no-repeat;
      background-position-y: bottom;
      margin-top: 15px;
      .f-china-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 500;
        font-size: 16px !important;
        color: #000000;
        img {
          width: 22px;
          height: 22px;
          margin-right: 5px;
        }
        p {
          display: flex;
          align-items: center;
        }
        .f-operatorName {
          font-weight: 400;
          font-size: 11px;
          color: #424242;
          .f-green {
            width: 7px;
            height: 7px;
            background: #00c509;
            border-radius: 50%;
            margin-right: 5px;
          }
        }
      }
      .f-ul {
        position: relative;
        display: flex;
        align-items: center;
        margin: 17px 0;
        .f-li {
          width: 98px;
          height: 54px;
          border-radius: 3px;
          background: rgba(255, 255, 255, 0.5);
          padding: 15px 0px 6px 0px;
          font-weight: 500;
          font-size: 12px;
          color: #000000;
          .f-img {
            width: 16px;
            height: 16px;
            margin-left: 14px;
          }
          .f-real-name {
            background: #fd6a56;
            border-radius: 8px;
            font-weight: 400;
            font-size: 9px;
            color: #ffffff;
            text-align: center;
            padding: 1px 6px;
          }
        }
        .f-li:not(:first-child) {
          margin-left: 10px;
        }
      }
      .f-residual-flow-card {
        text-align: center;
        width: 275px;
        margin-left: 9px;
        .f-chart {
          width: 275px;
          height: 5px;
          background: rgba(0, 0, 0, 0.3);
          border-radius: 6px;
          position: relative;
          margin: 3px 0 5px 0;
          .f-chart-inner {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            height: 5px;
            border-radius: 6px;
            background: linear-gradient(90deg, #c6379c, #3c65aa);
          }
        }
        .f-box-01 {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-weight: 300;
          font-size: 8px;
          color: #666666;
        }
        .f-box-02 {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-weight: 500;
          font-size: 12px;
          color: #000000;
          margin-bottom: 15px;
        }
        .f-box-03 {
          line-height: 16px;
          font-weight: 400;
          font-size: 11px;
          color: #000000;
          text-align: left;
        }
      }
      .f-recharge-card {
        border-radius: 13px;
        display: flex;
        justify-content: space-between;
        padding: 19px 7px 12px 15px;
        margin-top: 23px;
        .f-left {
          font-weight: 400;
          flex: 1;
          .f-name {
            font-size: 16px;
            color: #000000;
          }
          .f-desc {
            font-size: 12px;
            color: #666666;
            margin: 12px 0 16px 0;
            p {
              height: 20px;
            }
          }
          .f-btn-box {
            width: 134px;
            background: rgba(255, 255, 255, 0.7);
            border-radius: 14px;
            font-size: 14px;
            color: #304eee;
            text-align: center;
            line-height: 27px;
            padding: 2px 0;
          }
        }
        .f-img-box {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 115px;
          .f-img01 {
            width: 111px;
            height: 116px;
          }
        }
      }
    }
    .f-out-china {
      width: 317px;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 13px;
      padding: 17px 12px 22px 12px;
      margin-top: 15px;
      background-image: url("@/assets/imgs/home_bg_international.png");
      background-size: 100% 118px;
      background-repeat: no-repeat;
      background-position-y: bottom;
      .f-out-china-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 500;
        font-size: 16px;
        color: #000000;
        img {
          width: 22px;
          height: 22px;
          margin-right: 5px;
        }
        p {
          display: flex;
          align-items: center;
        }
        .f-operatorName {
          font-weight: 400;
          font-size: 11px;
          color: #424242;
          .f-green {
            width: 7px;
            height: 7px;
            background: #00c509;
            border-radius: 50%;
            margin-right: 5px;
          }
        }
      }
      .f-box-03 {
        display: flex;
        align-items: center;
        line-height: 16px;
        font-weight: 400;
        font-size: 11px;
        margin-top: 57px;
        color: #000000;
        p:first-child {
          width: 65px;
          text-align: right;
        }
      }
    }
  }
}
</style>

<style lang='scss' >
.f-popover-content {
  font-weight: 300;
  font-size: 9px;
  color: #ffffff;
  padding: 6px 10px;
  width: 101px;
}
</style>